<template>
    <div style="width: 70%;" class="salarystable">
        <el-form ref="ruleFormRef" style="max-width: 600px;" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="当前基本工资" prop="currentBasicSalary">
                <el-input v-model="ruleForm.currentBasicSalary" placeholder="当前基本工资" />
            </el-form-item>
            <el-form-item label="当前岗位工资" prop="currentPostWage">
                <el-input v-model="ruleForm.currentPostWage" placeholder="当前岗位工资" />
            </el-form-item>
            <el-form-item label="当前工资合计">
                <el-input disabled :value="currentBasicSalaryall" />
            </el-form-item>
            <el-form-item label="转正基本工资" prop="correctionOfBasicWages">
                <el-input v-model="ruleForm.correctionOfBasicWages" placeholder="转正基本工资" />
            </el-form-item>
            <el-form-item label="转正岗位工资" prop="turnToPostWages">
                <el-input v-model="ruleForm.turnToPostWages" placeholder="转正岗位工资" />
            </el-form-item>
            <el-form-item label="转正工资合计">
                <el-input disabled :value="correctionOfBasicWagesall" />
            </el-form-item>
            <el-form-item>
                <div style="margin-left: 108px;">
                    <el-button style="background-color: #335bf8;color: white;" @click="submitForm(ruleFormRef)">
                        确认
                    </el-button>
                    <el-button @click="store.$state.dialogVisible = false">关闭</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { useStore } from '@/stores/counter'
import { setWages } from '@/api/Wages'
import { ElMessage } from 'element-plus'
let y = defineProps(['userId'])
const store = useStore()

interface RuleForm {
    currentBasicSalary: string
    currentPostWage: string
    correctionOfBasicWages: string
    turnToPostWages: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    currentBasicSalary: '',//当前基本工资
    currentPostWage: '',//当前岗位工资
    correctionOfBasicWages: '',//转正基本工资
    turnToPostWages: '',//转正岗位工资
})
let currentBasicSalaryall = computed(() => {
    return Number(ruleForm.value.currentBasicSalary) + Number(ruleForm.value.currentPostWage)
})
let correctionOfBasicWagesall = computed(() => {
    return Number(ruleForm.value.correctionOfBasicWages) + Number(ruleForm.value.turnToPostWages)
})
const rules = ref<FormRules<RuleForm>>({
    currentBasicSalary: [{ required: true, message: '请输入当前基本工资', trigger: 'blur' },],
    currentPostWage: [{ required: true, message: '请输入当前岗位工资', trigger: 'blur' },],
    correctionOfBasicWages: [{ required: true, message: '请输入转正基本工资', trigger: 'blur' },],
    turnToPostWages: [{ required: true, message: '请输入转正岗位工资', trigger: 'blur' },],

})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            setTimeout(() => {
                setWages(y.userId, ruleForm.value).then(res => {
                    console.log(res);
                }).catch((err) => {
                    ElMessage.error('该员工已定薪,不能重复定薪')
                })
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>

</style>